import React from 'react';
import {
  Row,
  Col,
  Table,
  Icon,
  Button,
  Modal,
  Form,
  Radio,
  Tooltip,
  notification,
} from 'antd';
import axios from 'axios';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import { Input } from 'antd';
import './common.less';
const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const RadioButton = Radio.Button;
const confirm = Modal.confirm;
const tip = ['添加工作日志成功', '添加工作日志失败', '删除工作日志成功', '删除工作日志失败', '编辑工作日志成功', '编辑工作日志失败'];

class ProblemSummarys extends React.Component {
  constructor(props) {
    super(props);
    const user = JSON.parse(sessionStorage.getItem("user"));
    this.state = {
      dataSource: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10
      },
      onChange: this.onChange,
      keyword: '',
      visible: false,
      visibleCom: false,
      user: user
    };
  };

  componentDidMount() {
    this.getOrderInfo();

  };

  search(value) {
    this.setState({ keyword: value });
    this.getOrderInfo({ keyword: value });
  }

  onChange = (pagination, filters, sorter) => {
    this.getOrderInfo({
      sortField: sorter.field,
      sortOrder: sorter.order,
      page: pagination.current,
      keyword: this.state.keyword,
      ...filters
    });
  };

  getOrderInfo = (params = {}) => {
    const token = sessionStorage.getItem("token");
    this.setState({ loading: true });
    var keyword = typeof (params.keyword) === "undefined"
      ? ''
      : params.keyword;
    axios
      .get(`${config.api}DailyStatics/QuerySummaryLogs?page=${params.page}&pageSize=${this.state.pagination.pageSize}&keyword=${keyword}`, { headers: { Authorization: 'Bearer ' + token } })
      .then((data) => {
        const pagination = {
          ...this.state.pagination
        };
        pagination.total = data.data.pageList.totalRows;
        pagination.current = params.page;
        this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination });

      })
      .catch(err => {
        intercept
      })
  };

  // 新增工作内容模态框
  showModal = () => {
    this.setState({
      visible: true,
    });
  }
  handleCancel = (e) => {
    this.setState({
      visible: false,
    });
  }
  NewAddSubmit = (e) => {
    e.preventDefault();
    const token = sessionStorage.getItem("token");
    const params = this.props.form.getFieldsValue();
    const user = this.state.user;
    axios.post(`${config.api}DailyStatics/AddSummary`, { WorkTime: params.worktime, UserName: user.UserName, Content: params.jjnr, WorkLogs: params.gzrz, status: 0 }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
      
      if (data.data.result) {
        this.openNotification("添加工作日志", tip[0], "#108ee9");
        this.getOrderInfo();
      } else {
        this.openNotification(tip[1], data.data.errorMessage, "red");
      }
    })
    .catch(err => {
      intercept
    })
    this.handleReset();
  }
  openNotification = (title, desc, color) => {
    notification.open({
      message: title,
      description: desc,
      icon: <Icon type="smile-circle" style={{ color: color }} />,
    });
  };
  handleReset = () => {
    this.setState({
      visible: false,
    });
  }
  // 编辑工作內容模态框
  showModalCompile = (e, record) => {
    this.setState({
      visibleCom: true,
    });
    this.setState({
      ComworkTime: record.workTime,
      summaryId: record.id
    })
    this.props.form.setFieldsValue({
      Comjjnr: record.remainingProblems,
      Comgzrz: record.phoneReciveCount
    });
  }
  handleOkCompile = (e) => {
    this.setState({
      visibleCom: false,
    });
  }
  handleCancelCompile = (e) => {
    this
      .props
      .form
      .resetFields();
    this.setState({
      visibleCom: false,
    });
  }
  CompileSubmit = (e) => {
    e.preventDefault();
    const token = sessionStorage.getItem("token");
    const params = this.props.form.getFieldsValue();
    const user = this.state.user;
    axios.post(`${config.api}DailyStatics/AddSummary`, { WorkTime: params.Comworktime, UserName: user.UserName, Content: params.Comjjnr, WorkLogs: params.Comgzrz, id: this.state.summaryId, status: 1 }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
      if (data.data.result) {
        this.openNotification("添加工作日志", tip[0], "#108ee9");
        this.getOrderInfo();
        this.handleOkCompile();
      } else {
        this.openNotification(tip[1], data.data.errorMessage, "red");
      }
    })
    .catch(err => {
      intercept
    })
    this.setState({
      visible: false,
    });
  }
  // 编辑工作內容模态框结束~~

  // 删除工作内容
  deleteSummary = (e, record) => {
    var that = this;
    const token = sessionStorage.getItem("token");
    confirm({
      title: '确定删除吗？',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk() {
        axios.post(`${config.api}DailyStatics/AddSummary`, { id: record.id, status: 2 }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
          if (data.data.result) {
            that.getOrderInfo();
          } else {
            const modal = Modal.success({
              title: '删除失败！',
              content: data.data.Message,
            });
            setTimeout(() => modal.destroy(), 2000);
          }
        })
        .catch(err => {
          intercept
        })
      },
      onCancel() {

      },
    });
  }

  render() {
    const Search = Input.Search;
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        width: 70
      }, {
        title: '日期',
        dataIndex: 'workingDateStr',
        width: 120
      }, {
        title: '工作时间',
        dataIndex: 'workTime',
        width: 50
      }, {
        title: '交接内容',
        dataIndex: 'remainingProblems',
        width: 150
      }, {
        title: '工作总结',
        dataIndex: 'phoneReciveCount',
        width: 150
      }, {
        title: '操作',
        width: 100,
        render: (text, record) => {
          return (
            <span>
              <Button type="primary" className="compileBtn" ghost onClick={(e, record) => { this.showModalCompile(e, text) }}>编辑</Button>
              <Button type="danger" className="delBtn" onClick={(e, record) => { this.deleteSummary(e, text) }}>删除</Button>
            </span>
          )
        }
      }
    ];
    const className = "components-table-demo-nested";
    const scroll = {
      y: 600
    };
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: {
          span: 10
        },
        sm: {
          span: 6
        }
      },
      wrapperCol: {
        xs: {
          span: 10
        },
        sm: {
          span: 14
        }
      }
    };
    return (
      <div className="orderinfo">
        {/* 編輯工作內容的模态框 */}
        <Modal
          title="编辑"
          visible={this.state.visibleCom}
          onOk={this.handleOkCompile}
          onCancel={this.handleCancelCompile}
          footer={null}
        >
          <Form onSubmit={this.CompileSubmit}>
            <FormItem {...formItemLayout} label={(
              <span>
                工作时间
                    <Tooltip title="自动填充">
                  <Icon type="question-circle-o" />
                </Tooltip>
              </span>
            )} hasFeedback>
              {getFieldDecorator('Comworktime', {
                initialValue: this.state.ComworkTime,
                rules: [
                  {
                    required: true,
                    message: 'Please input your startandend!',
                    whitespace: true
                  }
                ]
              })(<RadioGroup>
                <RadioButton value="早班">早班</RadioButton>
                <RadioButton value="晚班">晚班</RadioButton>
                <RadioButton value="行政班">行政班</RadioButton>
              </RadioGroup>)}
            </FormItem>
            <FormItem {...formItemLayout} label={(
              <span>
                交接内容
                      <Tooltip title="自动填充">
                  <Icon type="question-circle-o" />
                </Tooltip>
              </span>
            )} hasFeedback>
              {getFieldDecorator('Comjjnr', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your startandend!',
                    whitespace: true
                  }
                ]
              })(<Input type="textarea" />)}
            </FormItem>
            <FormItem {...formItemLayout} label={(
              <span>
                工作日志
                <Tooltip title="自动填充">
                  <Icon type="question-circle-o" />
                </Tooltip>
              </span>
            )} hasFeedback>
              {getFieldDecorator('Comgzrz', {
                rules: [
                  {
                    required: true,
                    message: 'Please input your startandend!',
                    whitespace: true
                  }
                ]
              })(<Input type="textarea" />)}
            </FormItem>
            <Row>
              <Col span={24}>
                <FormItem className="center">
                  <Button type="primary" className="submitBtn" htmlType="submit">提交</Button>
                  <Button onClick={this.handleCancelCompile}>取消</Button>
                </FormItem>
              </Col>
            </Row>
          </Form>
        </Modal>
        <Row gutter={8} style={{
          marginTop: '20px'
        }}>
          <Col span={24}>
            <div
              style={{
                textAlign: 'center',
                padding:'12px 10px',
                marginBottom:'15px',
                backgroundColor:'#eff8ff'
              }}>
              <Search
                placeholder="请输入任意查询条件"
                style={{
                  width: 600,
                  height:"34px"
                }}
                onSearch={value => this.search(value)} />
              <Button type="primary" className="NewAdd" onClick={this.showModal}>新增</Button>
              <Modal
                title="新增"
                visible={this.state.visible}
                onCancel={this.handleCancel}
                footer={null}
                width={800}
              >
                <p className="userNames">名&#x3000;&#x3000;称: &#x3000;{this.state.user.UserName}</p>
                <Form onSubmit={this.NewAddSubmit}>
                  <FormItem {...formItemLayout} label={(
                    <span>
                      工作时间
                        <Tooltip title="自动填充">
                        <Icon type="question-circle-o" />
                      </Tooltip>
                    </span>
                  )} hasFeedback>
                    {getFieldDecorator('worktime', {
                      rules: [
                        {
                          required: true,
                          message: 'Please input your startandend!',
                          whitespace: true
                        }
                      ]
                    })(<RadioGroup>
                      <RadioButton value="早班">早班</RadioButton>
                      <RadioButton value="晚班">晚班</RadioButton>
                      <RadioButton value="行政班">行政班</RadioButton>
                    </RadioGroup>)}

                  </FormItem>
                  <FormItem {...formItemLayout} label={(
                    <span>
                      交接内容
                            <Tooltip title="自动填充">
                        <Icon type="question-circle-o" />
                      </Tooltip>
                    </span>
                  )} hasFeedback>
                    {getFieldDecorator('jjnr', {
                      rules: [
                        {
                          required: true,
                          message: 'Please input your startandend!',
                          whitespace: true
                        }
                      ]
                    })(<Input type="textarea" />)}
                  </FormItem>
                  <FormItem {...formItemLayout} label={(
                    <span>
                      工作日志
                <Tooltip title="自动填充">
                        <Icon type="question-circle-o" />
                      </Tooltip>
                    </span>
                  )} hasFeedback>
                    {getFieldDecorator('gzrz', {
                      rules: [
                        {
                          required: true,
                          message: 'Please input your startandend!',
                          whitespace: true
                        }
                      ]
                    })(<Input type="textarea" />)}
                  </FormItem>
                  <Row>
                    <Col span={24}>
                      <FormItem className="center">
                        <Button type="primary" className="submitBtn" htmlType="submit">提交</Button>
                        <Button onClick={this.handleReset}>取消</Button>
                      </FormItem>
                    </Col>
                  </Row>
                </Form>
              </Modal>
            </div>
            <Table
              {...this.state}
              bordered={true}
              className={className}
              columns={columns}
              scroll={scroll} />
          </Col>
        </Row>
      </div>
    )
  }
}
const ProblemSummary = Form.create()(ProblemSummarys);
export default ProblemSummary